上一章 Day 22 - React 第一個Component

• AJAX

AJAX是以XMLHttpRequest(XHR)物件為主要核心的實作,

用於從客戶端對伺服器端發送HttpRequest請求, 使用XML格式, 後來JSON格式變為主流。

而jQuery擴充了原本XHR物件為(jqXHR), 並加入類似於Promise的介面

可以使用一個以上的函式傳入參數, 在單一Request中指定多個callback。

例如:

$.ajax({

    //請求的網址
    url:'test',

        //請求的資料
    data:{
        id:'123'
    },

    //請求的Type
    type: 'GET',

    //資料形式
    dataType: 'json',

})
    //成功時執行
    .done(function(json){

    })
    //失敗時執行
    .fail(function(xhr, status, errorThrown){
    
    })
    //不論失敗成功皆執行
    .always(function(xhr, status){

    })

• Fetch API

Fetch是號稱近年來要取代XHR的新技術標準, 2015年HTML 5 正式標準化, Fetch API就是Html 5 的一部分

由Mozilla, Googole率先在瀏覽器提供原生支援, 後續微軟與其他公司也都跟進,

現今瀏覽器都已自帶Fetch, 連Library都不用引入就可以使用

原生API的支持加上前端框架這幾年快速演進, 例如React, Vue, 越來越多團隊棄用jQuery。

Fetch並不是單純對XHR加強或改進, 他是基於Promise語法結構設計的API,

而且相對於XHR來的更有效率, 擴充性更好。

fetch('test').then(function(response) {
    //處理response

})

fetch()方法會回傳一個已實現Promise物件的Response

預設方法為GET, 當然也可以自己設定請求資訊

fetch('test', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
        body: request
}).then(response => response.json())
.then(data => console.log(data);

下一章我們就來實作

Day 24 - React Fetch 向後端API請求資料(1)